<!-- 运单详情-已完成 -->
<template>
  <view class="info_body">
    <view class="card flex_start">
      <image class="img" src="@/assets/images/pages2/willPage/wc.png" />
      <view class="flex_up">
        <view class="flex_between status">
          <span class="tit1">已完成</span>
          <span class="blue_font" @click="toMapDetail">物流详情 ></span>
        </view>
        <span class="tit2">{{ transStatus }}</span>
      </view>
    </view>

    <!-- 地址簿 -->
    <view class="card">
      <view class="address_card">
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/fa.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList.shipper }}{{ orderList.shipperMobile ? orderList.shipperMobile :
                orderList.shipperTel }}</span>
            </view>
            <view class="add_info">{{ orderList.shipperAdd || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/shou.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList.receiver }}{{ orderList.receiverMobile ? orderList.receiverMobile :
                orderList.receiverTel }}</span>
            </view>
            <view class="add_info">{{ orderList.receiverAdd || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">基本信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>承运单号</span><span>{{ orderList.billNo }}</span></view>
        <view class="con flex_start"><span>下单时间</span><span>{{ orderList.billingTime }}</span></view>
        <view class="con flex_start"><span>起运地</span><span>{{ orderList.startBranchName }}</span></view>
        <view class="con flex_start"><span>目的地</span><span>{{ orderList.destinationBranchName }}</span></view>
        <view class="con flex_start"><span>外转目的地</span><span>{{ orderList.outSourcingDestination }}</span></view>
        <view class="flex">
          <view class="con flex_start"><span>承运类型</span><span>{{ pickSendType(orderList.sendType) }}</span></view>
          <view class="con flex_start"><span>付款方式</span><span>{{ pickClearingForm(orderList.clearingForm) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>接货方式</span><span>{{ pickUpType(orderList.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>保价声明</span><span>￥{{ orderList.insuredMoney }}</span></view>
        </view>
        <view class="door_box gray_bg flex_start">
          <image class="img" src="@/assets/images/32pt@3x.png" />
          <view>
            <span class="t">上门接货时间</span>
            <span class="te">{{ orderList.receivingTime }}</span>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">货物信息</view>
      <view class="gray_bg">
        <view class="goods_card flex_between" v-for="(item, index) in orderList.goodsInfo" :key="index">
          <view class="flex_start">
            <span>{{ item.goodsName }}</span>
            <span :style="{ color: item.upNumber && item.upNumber !== item.goodsNumber ? '#0966FF' : '#666' }">{{
              filterGoodsNum(item) }}</span>
          </view>
          <view>{{ filterGoodsInfo(item) }}</view>
        </view>
      </view>
    </view>

    <view class="card" v-if="logData">
      <view class="tit">提货记录</view>
      <view class="pick_card" v-for="(log, index) in logData" :key="index">
        <view class="pick_time flex_start"><span class="dot"></span>提货时间：{{ log.upTime }}</view>
        <view class="gray_dash">
          <view class="pick_bg pick_bot">
            <view class="item"><span>{{ log.goodsInfo[0].goodsName }}</span><span
                :style="{ color: (Number(log.goodsInfo[0].goodsNumber) - Number(log.goodsInfo[0].upNumber)) !== 0 ? '#FF8F1F' : '#000' }">交货{{
                  log.goodsInfo[0].upNumber }}件，剩余{{ Number(log.goodsInfo[0].goodsNumber) -
    Number(log.goodsInfo[0].upNumber)
  }}件</span></view>
          </view>
          <view class="pick_bg">
            <view class="item"><span>签收人</span><span>{{ log.receiverName }}</span><span class="gray_font" is-link
                @click="showSign(log.signPic, log.receiverName, log.receiverPhone, log.receiverIdNo)">签名></span></view>
            <view class="item"><span>仓储费用</span><span>{{ filterSave(log.costList) }}</span></view>
            <view class="item"><span>仓储时长</span><span>{{ log.storageDuration }}</span></view>
            <view class="item"><span>开单处</span><span>{{ log.startBranchName }}</span></view>
            <view class="item"><span>库位</span><span>{{ log.locationName }}</span></view>
            <view class="item"><span>备注</span><span>{{ log.remarks }}</span></view>
            <!-- 图片 -->
            <view class="file_card" v-if="log.filePic?.length" :showIcon="true" @click="showFn(log.filePic)">
              <template v-for="(pic, index) in getFile(log.filePic)" :key="index">
                <image :src="pic"
                  :class="getFile(log.filePic).length >= 4 && index >= 4 ? 'file_img more' : 'file_img'" />
                <span class="overlay" v-if="index == 3">共{{ getFile(log.filePic).length }}张</span>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">提货信息</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>提货方式</span><span>{{ pickUpType(orderList.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>直送服务</span><span>{{ pickDeliveryType(orderList.deliveryType) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>卸货类型</span><span>{{ pickDischargeServer(orderList.dischargeServer) }}</span>
          </view>
          <view class="con flex_start"><span>楼层电梯</span><span>{{ floorType }}</span></view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">代收货款</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>货款金额</span><span>￥{{ orderList.collectionMoney }}</span></view>
          <view class="con flex_start">
            <span>返还周期</span>
            <span v-if="orderList.returnCycle == 1">即日退</span>
            <span v-if="orderList.returnCycle == 2">三日退</span>
            <span v-if="orderList.returnCycle == 3">月结</span>
            <span v-if="!orderList.returnCycle">暂无数据</span>
          </view>
        </view>
        <view class="con flex_start">
          <span>返还方式</span>
          <span v-if="orderList.returnType == 1">会员卡返还</span>
          <span v-if="orderList.returnType == 2">银行卡返还</span>
          <span v-if="orderList.returnType == 3">微信返还</span>
          <span v-if="orderList.returnType == 4">支付宝返还</span>
          <span v-if="orderList.returnType == 5">现金返还</span>
          <span v-if="!orderList.returnType">暂无数据</span>
        </view>
        <view class="con flex_start"><span>银行卡号</span><span>{{ orderList.returunAccount || '暂无数据' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">更多服务</view>
      <view class="base_card">
        <view class="con flex_start"><span>单据服务</span><span>{{ orderList.billServer || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>包装服务</span><span>{{ orderList.packing ? '是' : '否' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">签单信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>签单单位</span><span>{{ orderList.billCompany || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>结算地</span><span>{{ orderList.clearAdd || '暂无数据' }}</span></view>
      </view>
    </view>


    <!-- 签名弹出层 -->
    <nut-popup position="bottom" closeable round :style="{ height: '40%' }" v-model:visible="showRound">
      <view class="popup_card">
        <view class="title">签收人详细信息</view>
        <view class="flex_start"><span>签收人</span><span>{{ receiverInfo.receiverName }}</span></view>
        <view class="flex_start"><span>联系方式</span><span>{{ receiverInfo.receiverPhone }}</span></view>
        <view class="flex_start"><span>身份证号</span><span>{{ receiverInfo.receiverIdNo }}</span></view>
        <view class="flex_start"><span>电子签名</span><span>
            <image class="sign_img" :src="receiverInfo.signPic" />
          </span>
        </view>
      </view>
    </nut-popup>

    <!-- 图片预览 -->
    <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" class="img_card" />

  </view>
</template>

<script lang="ts" setup>
import Taro, { useReady, } from '@tarojs/taro'
import { ref, reactive, computed } from 'vue'
import useOrderStore from '@/store/order'
import { getpickup } from "@/@api/waybill";
import { getTransStatus } from "@/@api/waybill";

import { getLogisticsInfo } from '@/@api/order';
import logisticsInfoStore from "@/store/logistics";
const logisticsStore = logisticsInfoStore();


const orderStore = useOrderStore()
const orderList = ref<any>();
orderList.value = orderStore.orderInfo
// orderList.value = signArr[2] // mock数据

// console.log(JSON.parse(JSON.stringify(orderList.value)), '初始化的数据')

const logData = ref() // 提货记录
const floorType = ref('') // 楼层电梯
pickElevatorNum(orderList.dischargeElevator); // 初始化楼层

/* 预览签名 */
const showRound = ref(false) // 弹框是否显示
const receiverInfo = ref({
  signPic: '',
  receiverName: '',
  receiverPhone: '',
  receiverIdNo: '',
});

function showSign(url, name, phone, ID) {
  const newurl = `http://${url}`
  receiverInfo.value.signPic = newurl
  receiverInfo.value.receiverName = name
  receiverInfo.value.receiverPhone = phone
  receiverInfo.value.receiverIdNo = ID
  showRound.value = true; // 抽屉显示
}



/* 初始化数据变量 start */
useReady(() => {
  Taro.setNavigationBarTitle({
    title: '运单详情'
  })
  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff',
  });
  getPickUpLog(); // 提货记录
  pickSum(); // 判断提货情况
  getStatus(); // 获取运输状态
})

/* 获取运输状态 */
const transStatus = ref() // 运输状态
async function getStatus() {
  const billNo = orderList.value.billNo; // '202307106' 
  const res = await getTransStatus(billNo);
  console.log(res, '运输状态')
  if (res.data.code == '200') {
    const str = res.data.data[0].eventType
    transStatus.value = str;
  } else {
    transStatus.value = '暂无数据';
  }
}

/* 计算是否部分提货 */
function pickSum() {
  const upNumber = orderList.value.goodsInfo[0].upNumber; // 提货数量
  const goodsNumber = orderList.value.goodsInfo[0].goodsNumber; // 货物数量
  if (upNumber && upNumber !== goodsNumber) {
    return true
  } else if (!upNumber || upNumber == goodsNumber) {
    return false
  }
}

/* 预览图片 */
const showPreview = ref(false)
const imgData = ref()

function showFn(file) {
  const fileArr = file.split(';').map(item => "http://" + item);
  const newFileArr = fileArr.map(item => ({ src: item }));
  imgData.value = newFileArr
  showPreview.value = true
}

function hideFn() {
  showPreview.value = false
}

/* 计算图片合合集 */
function getFile(file) {
  if (file) {
    const fileArr = file.split(';').map(item => "http://" + item);
    return fileArr
  }
}



// 提货记录接口
async function getPickUpLog() {
  // mock数据
  // logData.value = logObj.map(({ remarks, locationName, startBranchName, upTime, goodsName, num, receiverName, receiverPhone, storageDuration, signPic, filePic, costList, receiverIdNo, goodsInfo }) => ({ remarks, locationName, startBranchName, upTime, goodsName, num, receiverName, receiverPhone, storageDuration, signPic, filePic, costList, receiverIdNo, goodsInfo }));
  // return
  // const res = await getpickup({ pickRecord: true, billNo: '000001441' });
  // const res = await getpickup({ pickRecord: true, ssoId: '25117' });
  const res = await getpickup({ pickRecord: true, ssoId: orderList.value.ssoId });
  console.log(res.data.rows, '提货记录接口结果')
  if (res.data.code == 200) {
    logData.value = res.data.rows.map(({ remarks, locationName, startBranchName, upTime, goodsName, num, receiverName, receiverPhone, storageDuration, signPic, filePic, costList, receiverIdNo, goodsInfo }) => ({ remarks, locationName, startBranchName, upTime, goodsName, num, receiverName, receiverPhone, storageDuration, signPic, filePic, costList, receiverIdNo, goodsInfo }));
  }
}

/* 计算仓储费用 */
function filterSave(costList) {
  console.log(costList, '仓储费用计算')
  const obj = costList.find(obj => obj.ssopRemark === '保管费');
  if (obj) {
    return `${obj.actualMoney}元`
  } else {
    return '无仓储费用'
  }
}


/* 过滤承运类型 */
function pickSendType(val: string) {
  if (val == '1') {
    return '快件'
  } else if (val == '2') {
    return '普件'
  } else if (val == '3') {
    return '整车'
  } else if (val == '4') {
    return '560经济型'
  } else if (val == '5') {
    return '560商务型'
  } else if (val == '6') {
    return '次日达'
  } else if (val == '7') {
    return '隔日达'
  }
}

/* 过滤付款方式 */
function pickClearingForm(val: string) {
  if (val == '1') {
    return '签单'
  } else if (val == '2') {
    return '现付'
  } else if (val == '3') {
    return '提付'
  }
}

/* 过滤货物信息-名称件数 */
function filterGoodsNum(val) {
  const { upNumber, goodsNumber } = val;
  console.log(upNumber, goodsNumber)
  let goodsNum;
  if (goodsNumber) {
    if (upNumber !== goodsNumber) {
      goodsNum = upNumber !== 0 ? '(' + upNumber + '/' + goodsNumber + ')' : goodsNumber
    } else {
      goodsNum = goodsNumber
    }
  }
  return (
    `${goodsNum}件`
  );
}


/* 过滤货物信息-重量体积包装 */
function filterGoodsInfo(val) {
  return (
    val.weigh +
    "kg," +
    val.goodsVolume +
    "m³," +
    val.packing
  );
}

/* 过滤提货方式 */
function pickUpType(val: string) {
  if (val == '1') {
    return '自提'
  } else if (val == '2') {
    return '送货'
  } else {
    return '直送'
  }
}

/* 过滤直送服务 */
function pickDeliveryType(val: string) {
  if (val == '1') {
    return '送商超'
  } else if (val == '2') {
    return '进仓'
  } else {
    return '报关'
  }
}

/* 过滤卸货类型 */
function pickDischargeServer(val: string) {
  if (val == '1') {
    return '标准件'
  } else if (val == '2') {
    return '非标准'
  } else {
    return '特殊件'
  }
}

/* 楼层电梯初始化 */
function pickElevatorNum(val: string) {
  console.log(val, 'val')
  if (val) {
    floorType.value = "电梯"
  } else {
    floorType.value = `楼梯：${orderList.elevatorNum ? orderList.elevatorNum : '1'}楼`
  }
}


/* 跳转电子承运单 */
function toCode() {
  console.log('跳转电子承运单')
}

/* 跳转物流详情 */
async function toMapDetail() {
  const billNo = orderList.value.billNo; // '202307106' 
  const dataParams = {
    billNo,
    orderCode: '',
  }
  const { data } = await getLogisticsInfo(dataParams);
  console.log(data, '已完成页面物流详情数据')
  if (data.code == 200) {
    let info = data.data;
    console.log(info, '请求物流详情存入logisticsStore.info')
    logisticsStore.info = info;
    Taro.navigateTo({
      url: '/pages2/mapDetail/index'
    });
  }
}

</script>

<style lang="scss">
.info_body {
  width: 750rpx;
  margin: 0 auto;
  background: #f5f5f5;
  padding: 16rpx 0;
  padding-bottom: 150rpx;

  .img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .tit1 {
    font-size: 32rpx;
    color: #07C160;
    font-weight: bold;
    margin-bottom: 4rpx;
  }

  .tit2 {
    font-size: 24rpx;
    color: #999;
  }


  .card {
    width: 702rpx;
    margin: 0 auto;
    padding: 24rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 16rpx auto;
    font-size: 24rpx;
    border-radius: 16rpx;

    .tit {
      font-size: 32rpx;
      color: #252525;
      font-weight: bold;
      margin-bottom: 24rpx;
      padding-bottom: 12rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }

    .gray_bg {
      width: 654rpx;
      box-sizing: border-box;
      background: #f5f5f5;
      padding: 12rpx;
      border-radius: 16rpx;
    }

  }

  .address_card {
    font-size: 32rpx;

    .icon {
      width: 72rpx;
      height: 72rpx;
    }

    .person {
      font-weight: 700;
      color: #252525;

      span:first-child {
        margin-right: 24rpx;
      }
    }

    .add_info {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }

  .base_card {
    .con {
      margin-bottom: 12rpx;

      span:first-child {
        margin-right: 24rpx;
        color: #999;
      }
    }
  }

  .goods_card {
    padding: 12rpx;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .goods_card:last-child {
    border-bottom: none;
  }



  .pick_card {
    width: 654rpx;
    background: #F4F5F6;
    padding: 32rpx;
    box-sizing: border-box;

    .pick_time {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 16rpx;
      position: relative;
      padding-left: 25rpx;
    }

    .pick_time::before {
      content: "";
      position: absolute;
      left: -15rpx;
      top: 5rpx;
      width: 15rpx;
      height: 15rpx;
      border-radius: 50%;
      border: 4rpx solid #0966FF;
    }


    .gray_dash {
      padding-left: 20rpx;
      position: relative;
    }

    .gray_dash::before {
      content: "";
      position: absolute;
      left: -5rpx;
      top: 0;
      width: 2rpx;
      height: 100%;
      background: linear-gradient(to bottom, transparent 50%, #999 50%);
      background-size: 100% 4rpx;
    }

    .pick_bg {
      background: #fff;
      padding: 12rpx 24rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      position: relative;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16rpx auto;

        span:first-child {
          color: #999;
        }
      }

      .file_card {
        display: flex;
        justify-content: flex-start;
        align-content: center;
      }

      .file_img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        position: relative;
        margin-right: 10rpx;
      }

      .file_img:nth-child(4) {
        margin-right: 0;
      }

      .more {
        display: none;
      }

      .overlay {
        position: absolute;
        right: 10rpx;
        width: 140rpx;
        height: 140rpx;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 24px;
        text-align: center;
        line-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
      }
    }


    .pick_bot {
      border-bottom: 1rpx solid #f2f2f2;
    }
  }


  .popup_card {
    padding: 16rpx 24rpx;

    .title {
      height: 90rpx;
      line-height: 100rpx;
      font-size: 32rpx;
      color: #252525;
      font-weight: bold;
    }

    .flex_start {
      font-size: 26rpx;
      margin-bottom: 12rpx;

      span:first-child {
        color: #999;
        flex: 2;
      }

      span:last-child {
        color: #252525;
        flex: 8;
      }
    }

    .sign_img {
      width: 280rpx;
      height: 116rpx;
      transform: rotate(-180deg);
      border: 1rpx dashed #999;
      border-radius: 10rpx;
    }
  }


}

.status {}

.flex {
  display: flex;

  .con {
    flex: 1;
  }
}

.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_up {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blue_font {
  color: #0966FF;
}

.gray_font {
  color: #666;
}
</style>